import styles from './knowledge.less'
import { useDispatch, useSelector, IRouteComponentProps } from 'umi'
import { useEffect, useState } from 'react'
import { Form, Button, Input, Select, Pagination, Drawer, Col, Row, Switch, message, Image, Popconfirm } from 'antd';
import { EditOutlined, CloudDownloadOutlined, SettingOutlined, DeleteOutlined, InboxOutlined,PlusOutlined } from '@ant-design/icons';
import { Curlist, FileParams, MarkList } from '@/utils/knowledge';
import { uploadImage } from '@/services';
interface Known {
    marklist: MarkList[],
    updateResult: {},
    fileList: FileParams[],
    fileSum: number
}
const { Option } = Select;
const knowledge: React.FC<IRouteComponentProps> = (props) => {
    const [visible, setvisible] = useState(false)
    const [visible1, setvisible1] = useState(false)
    const [visible2, setvisible2] = useState(false)
    const [curList, setcurList] = useState<Curlist>({} as Curlist)
    let know: Known = useSelector(state => state.knowledge)
    // console.log(know, 'know...')
    let dispatch = useDispatch()
    useEffect(() => {
        dispatch({
            type: 'knowledge/getMark'
        });
    }, [])
    //跳转去到编辑界面
    function toEdit(id: string) {
        props.history.push(`/knowledge/editor?id=${id}`)
    }
    //上传云端
    function Toupdate(id: string, status: string) {
        status = status == 'publish' ? 'draft' : 'publish'
        // dispatch({
        //     type: 'knowledge/Toupdate',
        //     payload: {
        //         id, status
        //     }
        // })

    }
    // 设置
    function Tosetting(id: string) {
        // console.log(id)
        setvisible(true)
        const result = know.marklist.filter(item => item.id == id)[0]
        // console.log('result,,,,',result)
        setcurList(result)
    }
    // 删除
    function confirm() {
        message.warning({
            content: '访客无权进行该操作',
            duration: 1
        });
    }
    function cancel() {
        
    }

    async function uploadImg(e: any) {
        // console.log(e.target.files)
        const form = new FormData()
        // console.log(e.target.files[0])
        const file = e.target.files[0]
        form.append('file', file)
        const result = await uploadImage(form as any)
        // console.log(result)
        if (result.statusCode == 201) {
            setcurList({ ...curList, cover: result.data.url })
        }
    }
    function changeImg() {
        message.warning({
            content: '访客无权进行该操作',
            duration: 1
        });
    }
    function close() {
        setvisible(false)
    }
    function close1() {
        setvisible1(false)
    }
    function close2() {
        setvisible2(false)
    }
    function showFile(page = 1) {
        setvisible1(true)
        dispatch({
            type: 'knowledge/getFiles',
            payload: {
                page
            }
        })

    }
    function changePage(page: number) {
        // console.log(page)
        dispatch({
            type: 'knowledge/getFiles',
            payload: {
                page
            }
        })
    }
    async function uploadfile(e: any) {
        // console.log(e.target.files)
        const form = new FormData()
        // console.log(e.target.files[0])
        const file = e.target.files[0]
        form.append('file', file)
        const result = await uploadImage(form as any)
        console.log(result)
        dispatch({
            type: 'knowledge/getFiles',
            payload: {
                page: 1
            }
        })
    }

    return <div className={styles.know}>
        <div className={styles.head}>
            <div className={styles.nav}>
                <Form layout="inline" hideRequiredMark>
                    <Row gutter={80}>
                        <Col span={12}>
                            <Form.Item
                                name="name"
                                label="名称"
                                rules={[{ required: true, message: '请输入知识库名称' }]}
                            >
                                <Input placeholder="请输入知识库名称" />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                name="url"
                                label="状态"
                                rules={[{ required: true, message: '请选择状态' }]}
                            >
                                <Select allowClear style={{ width: '100%' }}>
                                    <Option value="male">已发布</Option>
                                    <Option value="female">草稿</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>

            </div>
            <div className={styles.btn}>
                <Button type="primary" >搜索</Button>
                <Button >重置</Button>
            </div>
        </div>
        <div className={styles.con}>
            <div style={{width:'100%',height:'40px',textAlign:'right',marginRight:'10px'}}>
            <Button type="primary"  icon={<PlusOutlined />} onClick={()=>{
                setvisible2(true)
            }}>新建</Button>
            </div>
            {
                know.marklist.map(item => {
                    return <div className={styles.item} key={item.id}>
                        <div className={styles.mask}>
                            <img src={item.cover} alt="" />
                            <div className={styles.content}>
                                <h3>{item.title}</h3>
                                <p>{item.summary}</p>
                            </div>
                            <ul className={styles.icon}>
                                <li onClick={() => { toEdit(item.id) }}><EditOutlined /></li>
                                <li><CloudDownloadOutlined onClick={() => Toupdate(item.id, item.status)} /></li>
                                <li><SettingOutlined onClick={() => { Tosetting(item.id) }} /></li>
                                <li>
                                    <Popconfirm
                                        title="确认删除?"
                                        onConfirm={confirm}
                                        onCancel={cancel}
                                        okText="确认"
                                        cancelText="取消"
                                    >
                                        <DeleteOutlined  />
                                    </Popconfirm>
                                    </li>
                            </ul>
                        </div>

                    </div>
                })
            }
        </div>
        <div className={styles.foot}>
            <Pagination defaultCurrent={1} total={6} pageSizeOptions={['8', '12', '24', '36']} showSizeChanger defaultPageSize={8} />
        </div>
        
        <Drawer
            title="新建知识库"
            width={600}
            onClose={close2}
            visible={visible2}
            bodyStyle={{ paddingBottom: 80 }}
            footer={
                <div
                    style={{
                        textAlign: 'right',
                    }}
                >
                    <Button onClick={close2} style={{ marginRight: 8 }}>
                        Cancel
              </Button>
                    <Button onClick={() => { changeImg() }} type="primary">
                        Submit
              </Button>
                </div>
            }
        >
            <Form hideRequiredMark>
                <Form.Item
                    name="name"
                    label="名称"
                    rules={[{ required: true, message: 'Please enter user name' }]}>
                    <Input
                        placeholder="Please enter user name" style={{ width: '100%' }} />
                </Form.Item>
                <Form.Item
                    name="description"
                    label="描述"
                    rules={[
                        {
                            required: true,
                            message: 'please enter url description',
                        },
                    ]}
                >
                    <Input.TextArea rows={4} placeholder="please enter url description"  />
                </Form.Item>
                <div>
                    <span>评论：</span>
                    <Switch defaultChecked={false} />
                </div>
            </Form>
            <div className={styles.upload}>
                <span>封面:&emsp;</span>
                <div className={styles.uploadImg}>
                    <label htmlFor="avatar">
                    <div style={{ textAlign: 'center' }}>
                                    <InboxOutlined style={{ color: '#00f', fontSize: '30px' }} />
                                    <p>
                                        点击选择文件或将文件拖拽到此处
                                </p>
                                    <p>
                                        文件将上传到 OSS, 如未配置请先配置
                                </p>
                                </div>
                    </label>
                    <input type="file" id='avatar' onChange={(e) => { uploadImg(e) }} />
                    {
                        curList.cover ? <input placeholder="Basic usage"  style={{ width: '100%', border: '1px solid #eee', height: '30px' }} /> :
                            <Input defaultValue='' />
                    }
                    <div style={{ margin: "10px 0" }}>
                        <Button style={{ marginRight: '20px' }} onClick={() => {
                            showFile()
                        }}>选择文件</Button>
                        <Button danger onClick={() => {
                            setcurList({ ...curList, cover: '' })
                        }}>移除</Button>
                    </div>
                </div>
            </div>
        </Drawer>
        <Drawer
            title="更新知识库"
            width={600}
            onClose={close}
            visible={visible}
            bodyStyle={{ paddingBottom: 80 }}
            footer={
                <div
                    style={{
                        textAlign: 'right',
                    }}
                >
                    <Button onClick={close} style={{ marginRight: 8 }}>
                        Cancel
              </Button>
                    <Button onClick={() => { changeImg() }} type="primary">
                        Submit
              </Button>
                </div>
            }
        >
            <Form hideRequiredMark>
                <Form.Item
                    name="name"
                    label="名称"
                    rules={[{ required: true, message: 'Please enter user name' }]}>
                    <Input
                        defaultValue={curList ? curList.title : ''}
                        placeholder="Please enter user name" style={{ width: '100%' }} />
                </Form.Item>
                <Form.Item
                    name="description"
                    label="描述"
                    rules={[
                        {
                            required: true,
                            message: 'please enter url description',
                        },
                    ]}
                >
                    <Input.TextArea rows={4} placeholder="please enter url description" defaultValue={curList.summary} />
                </Form.Item>
                <div>
                    <span>评论：</span>
                    <Switch defaultChecked />
                </div>
            </Form>
            <div className={styles.upload}>
                <span>封面:&emsp;</span>
                <div className={styles.uploadImg}>
                    <label htmlFor="avatar">
                        {
                            curList.cover ? <img src={curList.cover} alt="" /> :
                                <div style={{ textAlign: 'center' }}>
                                    <InboxOutlined style={{ color: '#00f', fontSize: '30px' }} />
                                    <p>
                                        点击选择文件或将文件拖拽到此处
                                </p>
                                    <p>
                                        文件将上传到 OSS, 如未配置请先配置
                                </p>
                                </div>
                        }
                    </label>
                    <input type="file" id='avatar' onChange={(e) => { uploadImg(e) }} />
                    {
                        curList.cover ? <input placeholder="Basic usage" defaultValue={curList.cover} style={{ width: '100%', border: '1px solid #eee', height: '30px' }} /> :
                            <Input defaultValue='' />
                    }
                    <div style={{ margin: "10px 0" }}>
                        <Button style={{ marginRight: '20px' }} onClick={() => {
                            showFile()
                        }}>选择文件</Button>
                        <Button danger onClick={() => {
                            setcurList({ ...curList, cover: '' })
                        }}>移除</Button>
                    </div>
                </div>
            </div>
        </Drawer>

        <Drawer
            title="文件选择"
            width={700}
            onClose={close1}
            visible={visible1}
            bodyStyle={{ paddingBottom: 80 }}
            footer={null}
        >
            <Form layout="inline" hideRequiredMark>
                <Row gutter={70}>
                    <Col span={12}>
                        <Form.Item
                            name="name"
                            label="文件名"
                            rules={[{ required: true, message: '请输入文件名' }]}
                        >
                            <Input placeholder="请输入知识库名称" />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            name="url"
                            label="文件类型"
                            rules={[{ required: true, message: '请选择状态' }]}
                        >
                            <Input placeholder="请选择文件类型" />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>

            <div className={styles.rest}>
                <Button type="primary" >搜索</Button>
                <Button >重置</Button>
            </div>
            <div className={styles.rest}>
                {/* <Button onClick={()=>{
                    uploadfile()
                }}>上传文件</Button> */}
                <label htmlFor="avatar2">
                    {/* <Button onClick={()=>{
                    uploadfile()
                }}>上传文件</Button> */}
                    <span>上传文件</span>
                </label>
                <input type="file" id='avatar2' onChange={(e) => { uploadfile(e) }} />
            </div>
            <div className={styles.fileTable}>
                {
                    know.fileList.map(item => {
                        return <div key={item.id} className={styles.fileTableItem}>
                            <Image.PreviewGroup>
                                <Image
                                    width='100%'
                                    height={120}
                                    src={item.url}
                                />
                            </Image.PreviewGroup>
                            {/* <img src={item.url} alt="" /> */}
                            <div className={styles.fileItemOriginalname}>{item.originalname}</div>
                        </div>
                    })
                }
            </div>
            <div className={styles.filefoot}>
                <b>共{know.fileSum}条</b>
                <Pagination defaultCurrent={1} total={know.fileSum} pageSizeOptions={['8', '12', '24', '36']} showSizeChanger defaultPageSize={12} onChange={(page) => {
                    changePage(page)
                }} />
            </div>
        </Drawer>
    
    </div>
}
export default knowledge